<template>
  <div class="xtx-goods-page">
    <div class="container m-top-20">
      <div class="goods-info">
        <div class="media">
          <div class="recommendPage">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="(i, l) in imgList" :key="l">
                <img class="imga" :src="'http://www.yocar.website:8080/yoche/img/' + i" alt="" />
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
          </div>
        </div>
        <div class="spec">
          <!-- 商品信息区 -->
          <div class="nav">
            <span>品牌: {{ car.brand }}</span>
            <span>系别：{{ car.type }}</span>
            <i v-show="query.typeCode == 1">严选</i>
          </div>
          <div class="head">
            <div class="left">
              <div class="div">里程</div>
              <span>{{ car.mile }}公里</span>
            </div>
            <div class="center">
              <div class="div">变速箱</div>
              <span>{{ car.gearbox }}</span>
            </div>
            <div class="right">
              <div class="div">排量</div>
              <span>{{ car.displacement }}</span>
            </div>
          </div>
          <h4>到手价：</h4>
          <div class="price">
            <span>{{ car.price }} 万元</span>
          </div>
          <div class="button">
            <el-popover
              v-if="query.typeCode == 1"
              placement="bottom"
              :title="'车辆id： ' + car.id"
              width="400"
              v-model="is"
              trigger="click"
            >
              <!-- <span>电话：{{ userInfo.phone }}</span> -->
              <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="80px"
                class="demo-ruleForm"
              >
                <el-form-item label="姓名" prop="pass">
                  <el-input type="password" v-model="ruleForm.reserve_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="checkPass">
                  <el-input type="password" v-model="ruleForm.reserve_phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
              <el-button slot="reference">预约看车</el-button>
            </el-popover>
            <el-popover v-else placement="bottom" :title="userInfo.surname + ' 先生/女生'" width="200" trigger="click">
              <span>电话：{{ userInfo.phone }}</span>
              <el-button slot="reference">联系车主</el-button>
            </el-popover>
          </div>
        </div>
      </div>
      <div class="cheyuan">
        <span>车源号：YC-{{ car.id }}</span>
        <span class="span">发布编号：YC-{{ goodData.id }}</span>
      </div>
      <!-- 商品详情 -->
      <div class="details">
        <h2>车辆详情</h2>
        <div class="contender">
          <div>
            <div>品牌：{{ car.brand }}</div>
            <div>系列：{{ car.type }}</div>
            <div>类型：{{ car.model }}</div>
            <div>排量：{{ car.displacement }}</div>
            <div>变输箱：{{ car.gearbox }}</div>
            <div>座位数：{{ car.seats }}座</div>
          </div>
          <div>
            <div>行驶里程：{{ car.mile }}公里</div>
            <div>排放标准：{{ car.emission_standard }}</div>
            <div>上牌时间：{{ car.card_time | data }}年</div>
            <div>车牌归属地：{{ province.province_name }} {{ city.city_name }}</div>
            <div>过户次数：{{ car.transfer_times }}</div>
            <div>事故情况：{{ car.accident_situation }}</div>
          </div>
        </div>
        <div class="message" v-if="query.typeCode == 2">
          <h3>车主有话说</h3>
          <el-row class="elrowboder">
            <el-col :span="24">
              <div class="grid-content">
                <el-avatar :size="80">{{ userInfo.nickname }} </el-avatar>
                <span class="span">{{ car.other }}</span>
              </div>
            </el-col>
          </el-row>
          <MessageList></MessageList>
        </div>
      </div>
      <!-- 图片 -->
      <div class="photo">
        <h4>图片信息</h4>
        <img
          v-for="(i, l) in imgList"
          :key="l"
          class="imga"
          :src="'http://www.yocar.website:8080/yoche/img/' + i"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
import MessageList from './components/message.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { getGoodCar, orderBusiness } from '@/api/cart'
export default {
  name: 'GoodCar',
  components: {
    swiper,
    swiperSlide,
    MessageList
  },
  data() {
    return {
      is: false,
      ruleForm: {
        reserve_name: '',
        reserve_phone: ''
      },
      rules: {
        reserve_name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        reserve_phone: [{ required: true, message: '请填写电话', trigger: 'blur' }]
      },
      userInfo: {},
      query: {},
      city: {},
      province: {},
      car: [],
      imgList: [],
      goodData: [],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await orderBusiness({
            car_id: this.car.id,
            ...this.ruleForm
          })
          if (res.data.msg) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
          }
          this.is = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    async getGoods() {
      const query = this.$route.query
      this.query = query
      const res = await getGoodCar({ id: query.id, typeCode: query.typeCode })
      this.imgList = res.data.data.car.photo.split('#')
      res.data.data.car.photo = res.data.data.car.photo.split('#')
      this.goodData = res.data.data
      this.car = this.goodData.car
      this.province = this.car.province
      this.city = this.car.city
      this.userInfo = res.data.data.user
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // this.swiper.slideTo(3, 1000, false);
  },
  filters: {
    data: value => {
      return new Date(value).getFullYear()
    }
  }
}
</script>

<style scoped lang="less">
.message {
  margin: 20px;
  border-top: 1px solid rgb(204, 203, 203);
  .elrowboder{
    border-bottom: 1px solid rgb(204, 203, 203);
  }
  .span{
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
    height: 56px;
  }
}
.photo {
  padding: 15px;
  margin-top: 20px;
  background-color: #fff;
  .imga {
    width: 480px;
    height: 320px;
    margin: 5px;
  }
}
.details {
  h2{
    padding-left: 20px;
  }
  margin-top: 20px;
  background-color: #fff;
  padding: 10px;
  .contender {
    margin: 20px;
    display: flex;
    color: #666;
    div {
      width: 600px;
    }
  }
}
.cheyuan {
  position: relative;
  background-color: #fff;
  .span {
    position: absolute;
    right: 0;
    padding-left: 20px;
  }
}
.recommendPage .swiper-container {
  position: relative;
  width: 100%;
  height: 320px;
  background: pink;
  .imga {
    width: 480px;
    height: 320px;
  }
}
.recommendPage .swiper-container .swiper-slide {
  width: 100%;
  line-height: 320px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
.h2 {
  margin-top: 20px;
  height: 10px;
}
.comment {
  margin: 60px;
  border-top: 1px solid #eee;
  h1 {
    margin-top: 20px;
  }
  .comment_ul {
    padding: 20px;
  }
  .comment_conter {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
    .liuyan {
      display: block;
      line-height: 30px;
      text-align: center;
      margin-top: 25px;
      color: #cf4444;
      border: 1px solid #cf4444;
      width: 60px;
      height: 30px;
      border-radius: 16px;
    }
    .iconfont {
      height: 100%;
      padding-top: 40px;
    }
    .conter {
      .input {
        width: 600px;
        height: 50px;
        margin-top: 14px;
        background-color: rgb(250, 249, 249);
        padding: 5px;
        border-radius: 5px;
      }
      .name {
        color: #666;
        font-weight: 700;
      }
      span {
        display: block;
        margin: 10px;
      }
      padding-left: 20px;
      flex: 1;
    }
  }
  .comment_head {
    width: 80px;
    height: 80px;
    border-radius: 40px;
  }
}
.goods-comment {
  min-height: 88px;
  background: #fff;
}
.user {
  display: flex;
  height: 120px;
  background-color: #fff;
  .img {
    height: 80px;
    margin: 20px;
  }
  .left {
    height: 80px;
    margin: 20px;
    .pan {
      display: block;
    }
  }
  .right {
    display: flex;
    justify-content: space-between;
    height: 80px;
    width: 100%;
    margin: 20px 0 20px 100px;
    div {
      flex: 1;
    }
    .pan {
      text-align: center;
      display: block;
      margin: 20px;
    }
    .maidao {
      position: relative;
    }
    a {
      position: absolute;
      right: 20px;
      top: 20px;
      display: block;
      height: 30px;
      width: 60px;
      color: #e26237;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      border: 1px solid #e26237;
    }
  }
}
.goods-info {
  overflow: hidden;
  margin-top: 20px;
  background: #fff;
  display: flex;
  .media {
    width: 480px;
    height: 320px;
  }
  .spec {
    flex: 1;
    padding: 30px;
  }
  .nav {
    span {
      display: inline-block;
      width: 130px;
    }
    i {
      display: inline-block;
      width: 50px;
      height: 25px;
      text-align: center;
      margin-left: 20px;
      font-style: none;
      background-color: rgb(218, 98, 98);
    }
  }
  .head {
    display: flex;
    margin-top: 20px;
    .left {
      border-right: 1px solid #000;
    }
    .center {
      border-right: 1px solid #000;
    }
    div {
      width: 120px;
      text-align: center;
      color: #666;
      .div {
        margin-bottom: 5px;
      }
      span {
        color: rgb(173, 92, 16);
      }
    }
  }
  .price {
    margin: 20px;
    color: #e26237;
    font-size: 30px;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}

.number-box {
  display: flex;
  align-items: center;
  .label {
    width: 60px;
    color: #999;
    padding-left: 10px;
  }
}
</style>
